/* * @Author: hhy * @Date: 2019-02-22 14:40:20 * @Last Modified by: chenjie *
@Last Modified time: 2019-09-02 14:58:50 * @文件说明: 背景图 */
<template>
  <div :style="style" class="h-qrcode">
    <img :src="bgi" alt="" />
    <div class="hover" @click="qrcodImgList">
      <p>{{ text }}</p>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { setItem } from "@/utils/storage";
export default defineComponent({
  props: {
    bgi: {
      type: String,
      default: "defaultAvatar"
    },
    w: {
      type: String,
      default: "100%"
    },
    h: {
      type: String,
      default: "44"
    },
    qurl: {
      type: String,
      default: ""
    },
    inline: {
      type: Boolean,
      default: false
    },
    text: {
      type: String,
      default: "下载二维码"
    }
  },
  setup(props) {
    const router = useRouter();
    const state = reactive({
      showQrcode: false
    });
    const qrcodImgList = () => {
      const url = props.qurl;
      if (url) {
        setItem("qsurl", url);
        router.push({
          path: "/qrcode"
        });
      }
    };
    const style = computed(() => {
      return {
        display: props.inline ? "inline-block" : "block",
        width: props.w.match("%") ? props.w : props.w + "px",
        height: props.h.match("%") ? props.h : props.h + "px"
      };
    });
    return {
      ...toRefs(state),
      qrcodImgList,
      style
    };
  }
});
</script>

<style lang="scss" scoped>
.h-qrcode {
  @include bgi;
  position: relative;
  overflow: hidden;

  .hover {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(18, 18, 18, 0.7);
    cursor: pointer;
    p {
      color: #fff;
      font-size: 14px;
      position: relative;
      top: 50%;
      margin-top: -7.5px;
    }
  }
  img {
    width: 100%;
    cursor: pointer;
  }

  .bgi-hover {
    @include flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
  }
}
.h-qrcode:hover .hover {
  display: block;
}
</style>
